<template>
	<div class="home_m">
		<main class="m_product" style="padding-bottom: 60px;">
			<div class="left_share_quality_content clearfix">
				<div class="share_quality">
					<div v-for="bitem in catergoryProducts" class="category_item">
						<div class="share_quality_top">
							<div class="share_title">
								<p class="share_text color_main_red">
									<span>
										{{bitem.title}}
									</span>
									<!--<span @click="" class="more_products_btn">
										更多
									</span>-->
									<router-link :to="'/category/'+bitem.categoryId" class="more_products_btn">
										更多
									</router-link>
								</p>
							</div>
						</div>
						<div class="share_quality_left not_eng_box">
							<ul style="overflow: hidden;">
								<li class="not_eng_item" v-for="item in bitem.tabs">
									<router-link class="not_eng_link" :to="'/detail/'+item.Id">
										<img v-lazy="root + item.ImgPath" alt="" class="not_eng_pic lazy-img-fadein">
										<div class="not_eng_info" style="padding-top: 10px;">
											<p class="not_eng_title">{{item.ProductName}}</p>
											<p class="not_eng_text">
												<i style="text-decoration: none;font-style: normal;font-size: 12px">¥</i>
												<span class="more_info_price_txt">{{item.CurrentPrice}}</span>
											</p>
										</div>
									</router-link>
								</li>
							</ul>
						</div>
					</div>
					<infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
						<span slot="no-more">
    								没有更多商品了 :(
  								</span>
					</infinite-loading>
				</div>
			</div>
		</main>
	</div>
</template>
<script>
	import InfiniteLoading from 'vue-infinite-loading';
	export default {
		data() {
			return {
				root: this.root,
				mainDatas: [],
				currentPage: 1,
				category: [],
			}
		},
		mounted() {
			this.getData();
			this.getCategory();
		},
		computed: {
			catergoryProducts: function() {
				let parr = []
				let arr = this.category
				let arr2 = this.mainDatas
				for(var i = 0; i < arr.length; i++) {
					let tabArr = []
					for(var g = 0; g < arr2.length; g++) {
						//一个商品分类里最多显示6个商品
						if(tabArr.length > 5) break;
						if(arr[i].Id == arr2[g].CategoryId) {
							tabArr.push({
								CurrentPrice: arr2[g].CurrentPrice,
								ProductName: arr2[g].ProductName,
								Id: arr2[g].Id,
								ImgPath: arr2[g].ImgPath,
								ShortDescription: arr2[g].ShortDescription,
							})
						}
					}
					parr.push({
						image: {
							image: arr[i].BigImageUrl
						},
						title: arr[i].CategoryName,
						categoryId: arr[i].Id,
						tabs: tabArr
					})
				}
				return parr;
			}
		},
		methods: {
			onInfinite() {
				setTimeout(() => {
					this.currentPage++
						this.getData(this.currentPage);
				}, 1000);
			},
			getData(page) {
				let _this = this;
				if(page == undefined) {
					page = 1
				}
				_this.$http.get('/Client/Products?OnSale=1&limit=6&page=' + page, null, localStorage.Authorization, res => {
					if(res.code === 200) {
						_this.mainDatas = _this.mainDatas.concat(res.data.list);
						_this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
						if(res.data.list.length == 0) {
							_this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
						}
					}
				})
			},
			getCategory() {
				let _this = this;
				_this.$http.get('/Client/Categories', null, localStorage.Authorization, res => {
					console.log('分类res', res)
					if(res.code === 200) {
						_this.category = res.data.list;
					}
				})
			}
		},
		components: {
			InfiniteLoading,
		},
		watch: {
			catergoryProducts: function(nval, oval) {
				console.log('nval', nval)
			}
		}
	}
</script>
<style>
	img[lazy=error] {
		background: url('../assets/images/no_pic_icon.png');
		background-size: 100% 100%;
	}
</style>
<style scoped="scoped">
	body {
		min-height: 1000px;
	}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
	.not_eng_item {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		padding: 0 4px;
	}
	
	.not_eng_link {
		background: #fff;
		border-radius: 10px 10px 0 0;
	}
	
	.not_eng_pic {
		width: 100%;
		height: 160px;
		border-radius: 10px;
		padding: 0;
		box-shadow: 0 0 64px 3px #888;
	}
	
	.not_eng_title {
		height: 35px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	.share_title {
		background: url(../assets/images/catogery_icon.png) no-repeat center center;
		background-size: 100% 100%;
	}
	
	.share_quality_top {
		padding: 10px 0;
	}
	
	.share_text {
		line-height: 34px;
		padding-left: 14px;
		color: #fff;
	}
	.more_products_btn {
		color: #6F7474;
		padding-right: 10px;
		float: right;
	}
</style>